import React from 'react';
import { Form, InputNumber } from 'antd';
import { ObjectType } from '@/pages/riskControl/utils';
import style from './RangeInputNumber.less';

export class RangeInputNumber extends React.PureComponent<ObjectType> {
  render() {
    const {
      getFieldDecorator,
      label,
      labelCol = { span: 6 },
      wrapperCol = { span: 8 },
      startId,
      endId,
      errorTip, // 输入错误后的提示
      onStartChange,
      onEndChange,
      showErrorTip,
    } = this.props;
    return (
      <Form.Item
        label={label}
        labelCol={labelCol}
        wrapperCol={wrapperCol}
        className={style.RangeInputNumber}
      >
        {getFieldDecorator(startId, {
          rules: [
            {
              type: 'number',
              message: '请输入',
            },
            {
              required: false,
            },
          ],
        })(<InputNumber placeholder="请输入" autoComplete="off" onChange={onStartChange} />)}
        -
        {getFieldDecorator(endId, {
          rules: [
            {
              type: 'number',
              message: '请输入',
            },
            {
              required: false,
            },
          ],
        })(<InputNumber placeholder="请输入" autoComplete="off" onChange={onEndChange} />)}
        {showErrorTip && <div className="tip">{errorTip}</div>}
      </Form.Item>
    );
  }
}
